import React from 'react'
import IOSView from './IOSView.jsx'
import IOSHelp from './IOSHelp.jsx'
import AndroidView from './AndroidView.jsx'
import AndroidHelp from './AndroidHelp.jsx'
import Card from 'lib/components/card.jsx'
import IOSSmartView from './IOSSmartView.jsx'
import moment from 'moment'
import AndroidBetaView from './AndroidBetaView.jsx'
import IconCell from './IconCell.jsx'
import NullHelp from './NullHelp.jsx'

export default class MainView extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      tabActive: -1,
      Handler: null,
      helpPanelName: 'Default'
    };

    this.helpPanel = {
      'Android':<AndroidHelp />,
      'iOS':<IOSHelp />,
      'Default': <NullHelp />
    };

    this.releaseDate = moment('2015-11-11');
  }

  componentDidMount() {
    if (BlueWare.setup_plat) {
      this.refs[`cell-${BlueWare.setup_plat}`].clickHandler();
    }
  }

  switchHandler(item) {
    this.setState({
      tabActive: item.unique.tabActive,
      Handler:item.unique.Handler,
      helpPanelName: item.platform === 'android' ? 'Android' : 'iOS'
    });
  }

  render(){
    return (
      <div className="setup">
        <div className="pure-g">
          <div className="pure-u-1 pure-u-xl-2-3">
            <div className="box">
              <div className="page-title">
                <h2>
                <a className="back" href={BlueWare.pageUrlPrefix + '/app'}>
                  <i className="iconfont">&#xe612;</i>
                </a>
                  添加应用 <sub>新增应用</sub>
                </h2>
              </div>
              <Card>
                <h1 style={{
                  fontSize:'20px',
                  margin:'3px auto 20px 0px',
                  color:'#CCCCCC',
                  fontFamily:'\'Helvetica Normal\', \'Helvetica\''
                }}>选择一种应用，开始安装</h1>
                <div className="pure-g" style={{marginLeft: -25, marginTop: 3}}>
                {
                  BlueWare.setup_plat === null || BlueWare.setup_plat === 'iOS'
                    ? (
                      <div style={{display:'inline-block'}}>
                        <IconCell
                          key={0}
                          ref={ 'cell-iOS' }
                          unique={{Handler:IOSSmartView, tabActive:1}}
                          className="pure-u-1-4"
                          platform="ios"
                          isBeta={false}
                          isSelected={this.state.tabActive === 1}
                          onClick={this.switchHandler.bind(this)}
                          style={{margin:'0 25px 25px'}} />
                        <IconCell
                          key={1}
                          unique={{Handler:IOSView, tabActive:2}}
                          className="pure-u-1-4"
                          platform="ios"
                          isBeta={true}
                          isSelected={this.state.tabActive === 2}
                          onClick={this.switchHandler.bind(this)}
                          style={{margin:'auto 25px 25px 25px'}} />
                      </div>
                    ) : null
                  }
                  {
                    BlueWare.setup_plat === null || BlueWare.setup_plat === 'Android'
                      ? (
                        <div style={{display:'inline-block'}}>
                          <IconCell
                            key={2}
                            ref={ 'cell-Android' }
                            unique={{Handler:AndroidView, tabActive:3}}
                            className="pure-u-1-4"
                            platform="android"
                            isBeta={false}
                            isSelected={this.state.tabActive === 3}
                            onClick={this.switchHandler.bind(this)}
                            style={{margin:'auto 25px 25px 25px'}} />
                        </div>
                      ) : null
                  }
                </div>
                {
                  this.state.Handler
                    ? (
                      <div className="pure-g">
                        <div className="pure-u-1">
                          <Card>
                            <this.state.Handler platform={this.state.helpPanelName} />
                          </Card>
                        </div>
                      </div>
                    ) : null
                }
              </Card>
            </div>
          </div>
          <div className="pure-u-1 pure-u-xl-1-3">
            <div className="box">
              <div className="page-title">
                <h2>
                  安装帮助 <sub>Help</sub>
                </h2>
              </div>
              {this.helpPanel[this.state.helpPanelName]}
            </div>
          </div>
        </div>
      </div>
    )
  }
}
